<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>


        //文档加载完成以后
        window.onload = function () {

            //操作元素对象的属性

            //1.控制元素的html内容
            // document.getElementById("box")

            var div = document.querySelector("#box");
            //alert(div.innerHTML);//获取html内容

            //设置html内容
            // div.innerHTML = "<h1>我是修改后的内容</h1>";

            //2.控制元素的文本
            //获取文本内容
            //alert(div.innerText);

            //设置文本内容
            //  div.innerText = "<h1>我是修改后的内容</h1>";




        }


        function btn() {
            //获取切换的图片
            var img = document.querySelector("img");
            //改变原来图片的路径
            img.src = "imgs/2.jpg";
            img.width = "300";
            img.height = "250";

            var div = document.querySelector("#box");
            //改变div的style样式
            div.style.color = "red";
            div.style.backgroundColor = "green";

            var input = document.querySelector("input");
            input.value = "小按钮";
            input.type = "password";


            //通过方法的形式来设置和返回属性
            alert(img.getAttribute("src")); //获取
            img.setAttribute("src", "imgs/1.jpg");//设置


        }


    </script>
</head>

<body>
    <div id="box">
        555555
        <a href="#">6666</a>
    </div>

    <img src="imgs/1.jpg" width="200px" height="150px">
    <input type="button" value="切换" onclick="btn()">

</body>

</html>